<template>
  <div>

    <el-row class="bread-nav">
      <ul class="bread-nav-title">
        <span>{{userTage}}</span>
      </ul>
      <ul class="bread-nav-content">
        <span class="search-label">模式:</span>
        <select @change='handleFilter' v-model="params.reset_mode">
          <option v-for="item in [{label:'全部',value:0},{label:'现金',value:1},{label:'信用',value:2}]" :key="item.label" :value="item.value">
            {{item.label}}
          </option>
        </select>
        <span class="search-label">状态:</span>
        <select @change='handleFilter' v-model="params.status">
          <option v-for="item in  [{label:'全部',value:0},{label:'正常',value:1},{label:'冻结',value:2},{label:'停用',value:3}]" :key="item.label" :value="item.value">
            {{item.label}}
          </option>
        </select>
        <span class="search-label">账号或名称:</span>
        <input @change="handleFilter" type="text" v-model="params.name" placeholder="账号或昵称">
        <button @click="handleFilter">查找</button>
        <button @click="handleCreateAgent" class="btnA">新增{{NumberToChinese(plv/1+1)}}级代理</button>
        <button @click="handleCreateMember" class="btnA" v-if="plv !== 0">新增会员</button>
      </ul>
      <ul class="bread-nav-content-right">
        <a class="back" @click="goBack">返回</a>
      </ul>
    </el-row>

    <el-row :gutter="10" class="content">
      <el-col :span="2">

        <table class="myTable fontSize">
          <thead>
          <tr>
            <th v-if="info.level === 0">
              庄家下线管理
            </th>
            <th v-else>
              [{{info.username}}]下线管理
            </th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>
              <button class="level-menu-button" @click="goOther(`/user/list/1/${params.parent}/${plv}/direct`)">
                直属代理
              </button>
              <span class="level-menu-right">{{subCount.direct_sub_agent_count}}</span>
            </td>
          </tr>
          <tr>
            <td>
              <button class="level-menu-button" @click="goOther(`/user/list/2/${params.parent}/${plv}/direct`)">
                直属会员
              </button>
              <span class="level-menu-right">{{subCount.direct_sub_member_count}}</span>
            </td>
          </tr>
          <tr>
            <td>
              <button class="level-menu-button" @click="goOther(`/user/list/1/${params.parent}/${plv}/all`)">
                全部代理
              </button>
              <span class="level-menu-right">{{subCount.all_sub_agent_count}}</span>
            </td>
          </tr>
          <tr  v-for="(item,index) in subCount.agent_details" :key="item.uids">
            <td>
              <button class="level-menu-button" @click="goOther(`/user/list/1/${params.parent}/${plv}/${index}`)">
                {{NumberToChinese(index)}}级代理
              </button>
              <span class="level-menu-right">{{item.count}}</span>
            </td>
          </tr>
          <tr>
            <td>
              <button class="level-menu-button" @click="goOther(`/user/list/2/${params.parent}/${plv}/all`)">
                全部会员
              </button>
              <span class="level-menu-right">{{subCount.all_sub_member_count}}</span>
            </td>
          </tr>
          </tbody>
        </table>

      </el-col>

      <el-col :span="22">
        <table class="myTable">
          <thead>
          <tr>
            <th>
              在线
            </th>
            <th>
              上级账号
            </th>
            <th>
              用户类型
            </th>
            <th>
              账号
            </th>
            <th>
              快开彩额度
            </th>
            <th>
              香港彩额度
            </th>
            <th>
              占成
            </th>
            <th>
              盘口
            </th>
            <th v-if="parseInt(params.type) !== 2">
              下线
            </th>
            <th v-if="parseInt(params.type) !== 2">
              代理
            </th>
            <th v-if="parseInt(params.type) !== 2">
              会员
            </th>
            <th v-if="parseInt(params.type) !== 2">
              新增
            </th>
            <th>
              新增日期
            </th>
            <th>
              状态
            </th>
            <th>
              功能
            </th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in list" :key="index">
            <td>
                <span v-if="item.is_online === 0">
                  *
                </span>
              <span v-else class="isOnline">
                </span>
            </td>
            <td>
              <button v-if="item.upperLevelAgent" class="tableBtn" @click="goOther(`/user/list/all/${item.upperLevelAgent.username}/${item.upperLevelAgent.level}/direct`)">
                {{item.upperLevelAgent.username}}
              </button>
            </td>
            <td>
              <ul>
                <li>
                    <span>
                     {{userMap.reset_mode[item.reset_mode]}}
                    </span>
                </li>
                <li>
                    <span>
                      {{item.level}}级{{userMap.type[item.type]}}
                    </span>
                </li>
              </ul>
            </td>
            <td>
              <button v-if="parseInt(item.type) === 1 " class="tableBtn" @click="goOther(`/user/list/all/${item.username}/${item.level}/direct`)">
                {{item.username}}
              </button>
              <span v-else>
                  {{item.username}}
                </span>
              [
              <span>
                  {{item.nickname}}
                </span>
              ]
            </td>
            <td>
              <button class="tableBtn" v-if="item.upperLevelAgent" @click="changeCash(1, item.qk_cash_amount, 1, item.username, item.upperLevelAgent.qk_cash_amount)">
                {{item.qk_cash_amount}}
              </button>
            </td>
            <td>
              <button class="tableBtn" v-if="item.upperLevelAgent" @click="changeCash(2, item.hk_cash_amount, 1, item.username, item.upperLevelAgent.hk_cash_amount)">
                {{item.hk_cash_amount}}
              </button>
            </td>
            <td>
              <button class="tableBtn" @click="handleParentShare(index, item.username)">
                明细
              </button>
            </td>
            <td>
                <span v-for="(handicapsItem, subIndex) in item.handicaps.split(',')" :key="subIndex">
                  {{userMap.handicaps[handicapsItem]}}盘
                </span>
            </td>
            <td v-if="parseInt(params.type) !== 2">
              <button class="tableBtn" @click="goOther(`/user/list/1/${item.username}/${item.level}/direct`)">
                {{item.count.direct_sub_agent_count}}
              </button>
              (<button class="tableBtn" @click="goOther(`/user/list/2/${item.username}/${item.level}/direct`)">
              {{item.count.direct_sub_member_count}}
            </button>)
            </td>
            <td v-if="parseInt(params.type) !== 2">
              <button class="tableBtn" @click="goOther(`/user/list/1/${item.username}/${item.level}/all`)">
                {{item.count.all_sub_agent_count}}
              </button>
            </td>
            <td v-if="parseInt(params.type) !== 2">
              <button class="tableBtn" @click="goOther(`/user/list/2/${item.username}/${item.level}/all`)">
                {{item.count.all_sub_member_count}}
              </button>
            </td>
            <td v-if="parseInt(params.type) !== 2">
              <ul>
                <li>
                  <button class="tableBtn agentBtn" @click="goOther(`/user/set/1/${item.username}/add`)">
                    代理
                  </button>
                </li>
                <li>
                  <button class="tableBtn memberBtn" @click="goOther(`/user/set/2/${item.username}/add`)">
                    会员
                  </button>
                </li>
              </ul>
            </td>
            <td>
              {{item.created_date}}
            </td>
            <td>
              <button @click="showpopup(index, item.status, item.username)" :id="'showpopup'+index">
                  <span v-for="(statusItem,statusIndex) in userMap.status" :key="statusIndex" v-if="item.status === statusIndex">
                    {{statusItem}}
                  </span>
              </button>
            </td>
            <td>
              <button class="tableBtn updataBtn" @click="handleEdit(item.$index, item)">修改</button>
              <button class="tableBtn commBtn" @click="handleCommission(item.$index, item)">退水</button>
              <button class="tableBtn logBtn" @click="handleLog(item.$index, item)">日志</button>
              <button class="tableBtn reportBtn" @click="handleRecord(item.$index, item)">记录</button>
              <button v-if="parseInt(info.level) === 0 || parseInt(info.level) === 1" class="tableBtn reportBtn" @click="handleOdds(item.$index, item)">赔率</button>
            </td>
          </tr>
          </tbody>
        </table>

        <el-row class="noticeFooter">
          <ul class="noticeFooter-left">共{{pagination.totalCount}}条记录 共{{pageNums.length}}页</ul>
          <ul class="noticeFooter-right">
            <button @click="handleCurrentChange(1)">首页</button>
            <button @click="handleCurrentChange(--pagination.currentPage)">前一页</button>
            <span>[</span>
            <button v-for="item in pageNums" :key="item" :class="item === pagination.currentPage?'noticeFooterSelected':''" @click="handleCurrentChange(item)">
              {{item}}
            </button>
            <span>]</span>
            <button @click="handleCurrentChange(++pagination.currentPage)">后一页</button>
            <button @click="handleCurrentChange(pagination.lastPage)">末页</button>
          </ul>
        </el-row>

      </el-col>
    </el-row>

    <div id="dialog" class="myDialog" style="display:none;">
      <div class="myDialogDiv">
        <table class="myTable">
          <tr>
            <td class="deepColor textRight">
              账号
            </td>
            <td class="textLeft">
              {{amountInfo.username}}
            </td>
          </tr>
          <tr>
            <td class="deepColor textRight">
              {{amountType}}额度
            </td>
            <td class="textLeft">
              {{lotteryAmount}}
              <button @click="WithdrawAll">
                提取全部额度
              </button>
            </td>
          </tr>
          <tr>
            <td class="deepColor textRight">
              上级可用额度
            </td>
            <td class="textLeft">
              {{upLotteryAmount}}
            </td>
          </tr>
          <tr>
            <td class="deepColor textRight">
              类型
            </td>
            <td class="textLeft">
              <label>
                <input type="radio" :value="1" v-model="amountInfo.oper_type">
                存款
              </label>
              <label>
                <input type="radio" :value="2" v-model="amountInfo.oper_type">
                提款
              </label>
            </td>
          </tr>
          <tr>
            <td class="deepColor textRight">
              金额
            </td>
            <td class="textLeft">
              <input type="text" v-model="amountInfo.amount">
            </td>
          </tr>
          <tr>
            <td class="deepColor textRight">
            </td>
            <td class="textLeft">
              <button @click="ValidateChangeAmount">
                确定
              </button>
            </td>
          </tr>
        </table>
      </div>
    </div>



    <div id="dialogShare" class="myDialog" style="display:none;">
      <div class="myDialogDiv">
        <table class="myTable" v-if="parentShare">
          <tr>
            <th>
              类型/账号
            </th>
            <th>
              快开彩
            </th>
            <th>
              香港彩
            </th>
          </tr>
          <tr v-for="(item,index) in parentShare" :key="index">
            <td>
              {{item.agent_level}}/{{item.username}}
            </td>
            <td>
              {{item.qk_shares}}
            </td>
            <td>
              {{item.hk_shares}}
            </td>
          </tr>
        </table>
        <table class="myTable" v-else>
          <tr>
            <td>加载中...</td>
          </tr>
        </table>
      </div>
    </div>

    <!--遮挡层-->
    <div style="position: fixed; z-index: 0"><div id="dialogshow"  @click="diashowclick" class="dialogshow" :style="'display:'+ dialogshow" ></div></div>


    <!--遮挡层-->
    <div class="myPopup" :style="'left:'+popupX+'px;top:'+(parseInt(popupY) - parseInt(appMainTop))+'px;display:'+popupVisible">
      <table class="myTable">
        <tr>
          <th style="padding:0">
            修改帐户状态
            <button @click="popupVisible = 'none'" class="delBtn">
            </button>
          </th>
        </tr>
        <tr>
          <label v-for="(item, index) in userMap.status">
            <input type="radio" :value="index" v-model="changeStatus.status" @change="changeAgentStatus()">
            {{item}}
          </label>
        </tr>
      </table>
    </div>

  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { user as userMap } from '@/utils/map' // 参数映射
  import $ from 'jquery'
  import 'jquery-ui/ui/widgets/dialog'
  import { NumberToChinese } from '@/utils/transformNum'
  export default {
    data() {

      return {

        dialogshow:'none',
        changeStatus: {
          username: '',
          status: 1,
        },

        popupX: '',
        popupY: '',
        popupVisible: 'none',
        amountInfo: '',
        amountType: '',
        lotteryAmount: '',
        upLotteryAmount: '',

        plv: null, // 父级等级
        userTage: null, // 用户标签
        userMap: userMap, // 用户字段映射
        parentShare: null, // 用户父级占成列表
        // 查詢參數
        params: {
          lv: null, // int 代理等级
          type: null, // enum(1,2)1代理,2会员,null表示2种都查询
          parent: null, // string 上级名称
          reset_mode: 0, // enum(1,2) 1现金,2信用
          name: null, // string(25) 账号名称或者昵称
          status: 0, // enum(1,2,3) 代理状态:1启动,2冻结,3停用
          perpage: 10, // 每页数量
        },
        // 额度修改表单
        amountForm: {
          username: null,
          amount: null, // 变更额度
          lottery_type: null, // 彩种 1:快开,2:香港
          oper_type: '1', // 操作类型 1:存入,2:提取
          parentAmount: null, // 父级额度
          selfAmount: null, // 自身额度
          max: null, // 最大额度
        },
        amountFormRules: {
          oper_type: [
            {
              required: true,
              trigger: 'blur',
              message: '请选择类型',
            },
          ],
          amount: [
            {
              required: true,
              trigger: 'blur',
              message: '请输入金额',
            },
            {
              trigger: 'blur',
              validator: (rule, value, callback) => {
                if (value / 1 <= 0) {
                  callback(new Error('金额要大于0'))
                } else {
                  callback()
                }
              },
            },
          ],
        },
        // 分页信息
        pagination: {
          currentPage: 1,
          totalCount: 0,
          defaultPageSize: 2,
          lastPage: 1,
        },
        list: null, // 列表数据
        loading: true,
        subCount: {}, // 下级数量统计列表
      }
    },
    // 数据格式化
    filters: {
      filterHandicaps() {},
      // 根据操作,返回修改额度的最大值
    },
    computed: {
      ...mapGetters(['info', 'appMainTop']),
      pageNums() {
        if (this.pagination.defaultPageSize !== 0) {
          const num = Math.ceil(this.pagination.totalCount / this.pagination.defaultPageSize)
          this.pagination.lastPage = num
          const ArrayNum = []
          for (let i = 1; i <= num; i++) {
            ArrayNum.push(i)
          }
          return ArrayNum
        } else {
          this.pagination.lastPage = 0
          return []
        }
      },
    },
    created() {
      // 验证参数
      console.log('验证参数的参数', this.$route)
      this.checkParams(this.$route.params)
      // 拉取数据
      this.fetchData()

    },
    mounted() {
      const _this = this
      $("#dialog").dialog({
        autoOpen: false,
        close: function() {
          _this.dialogshow = 'none'
        },
      })
      $( "#dialogShare" ).dialog({
        autoOpen: false,
        close: function() {
          _this.dialogshow = 'none'
        },
      })
      $('#dialog').dialog({
        width: 430,
        autoOpen: false,
      })
      $('#dialogShare').dialog({
        autoOpen: false,
        width: 430,
      })
      const tmp = $('.ui-dialog-titlebar-close').children().clone()
      $('.ui-dialog-titlebar-close').html('').append(tmp)
    },
    methods: {
      NumberToChinese,
      diashowclick() {
        this.dialogshow = 'none'
        $('#dialog').dialog('close')
      },
      changeAgentStatus() {
        this.$store
          .dispatch('ChangeStatus', this.changeStatus)
          .then(response => {
            if (response.status) {
              this.$message({
                message: `${this.changeStatus.username}状态修改成功`,
                type: 'success',
              })
            } else {
              this.$message({
                message: `${this.changeStatus.username}状态修改失败`,
                type: 'error',
              })
            }
            this.popupVisible = 'none'
            // 修改后拉取数据
            this.fetchData()
          })
      },
      showpopup(index, value, userName) {
        this.changeStatus.status = value
        this.changeStatus.username = userName
        this.popupVisible = 'block'
        const el = document.getElementById('showpopup' + index)
        this.popupX = el.getBoundingClientRect().left - 100
        this.popupY = el.getBoundingClientRect().top + 25
        setTimeout(() => {
          this.popupVisible = 'none'
        }, 5000)
      },

      ValidateChangeAmount() {
        if (this.amountInfo.amount === null) {
          alert('金额不能为空')
        }
        if (this.amountInfo === 0 === null) {
          alert('请选择类型')
        } else {
          this.$store.dispatch('ValidateChangeAmount', { ChangeAmountForm: this.amountInfo })
            .then(response => {
              console.log(response)
              if (response.status) {
                this.$store.dispatch('ChangeAmount', { ChangeAmountForm: this.amountInfo })
                  .then(response => {
                    if (response.status) {
                      alert(response.message)
                      $('#dialog').dialog('close')
                      this.dialogshow='none'
                      this.checkParams(this.$route.params)
                      this.fetchData()
                    } else {
                      alert(Object.values(response.message)[0].toString())
                    }
                  })
              } else {
                alert(Object.values(response.message)[0].toString())
              }
            })
        }
      },
      WithdrawAll() {
        const params = {
          username: this.amountInfo.username,
          l_type: this.amountInfo.lottery_type,
          mode: this.amountInfo.mode,
        }
        if (window.confirm('是否确定抽取额度吗？')) {
          this.$store.dispatch('WithdrawAll', params)
            .then(response => {
              console.log(response.status)
              if (response.status) {
                alert(response.message)
                $('#dialog').dialog('close')
                this.dialogshow='none'
                this.checkParams(this.$route.params)
                this.fetchData()
              } else {
                alert(response.message)
              }
            })
          return true
        } else {
          return false
        }
      },
      changeCash(type, value, mode, username, upAmount) {
        console.log('点击事件！')
        this.dialogshow='block'
        this.amountInfo = ''
        if (mode === 1) { // 1现2信
          if (type === 1) { // 1快2港
            this.amountType = '快开彩'
          } else {
            this.amountType = '香港彩'
          }
        } else {
          if (type === 1) {
            this.amountType = '快开彩信用'
          } else {
            this.amountType = '香港彩信用'
          }
        }
        this.upLotteryAmount = upAmount
        this.lotteryAmount = value
        const temp = {
          username: username,
          amount: null,
          lottery_type: type,
          oper_type: null,
          mode: mode,
        }
        this.amountInfo = temp
        $('#dialog').dialog({
          title: this.amountInfo.username + '#额度修改',
        })
        $('#dialog').dialog('open')
        console.log(this.list,'888888888888')
      },
      goOther(value) {
        this.$router.push(value)
      },
      goBack() {
        this.$router.go(-1)
      },
      // 根据传入的参数,转换post的参数
      // 路由传入3个参数,type,parent,lv
      checkParams(params) {
        // console.log(params);
        // 用户
        console.log('验证参数', params)
        if (params.parent === 'my') {
          this.params.parent = this.info.username
          this.userTage = this.info.username
        } else {
          this.params.parent = params.parent
          this.userTage = params.parent
        }
        this.fetchSubCount(this.params.parent)

        // 父级等级
        if (params.plv === 'my') {
          this.plv = this.info.level
        } else {
          this.plv = params.plv
        }

        // 下级等级
        if (params.lv === 'direct') {
          this.params.lv = parseInt(this.plv, 10) + 1 // 当前用户的lv的下级
          this.userTage += ` -> 直属${this.params.lv}级`
        } else if (params.lv === 'all') {
          this.params.lv = null
          this.userTage += ` -> 全部`
        } else if (parseInt(params.lv, 10) >= 0) {
          this.params.lv = parseInt(params.lv, 10) // 指定用户的下级
          this.userTage += ` -> ${this.params.lv}级`
        }

        // 类型
        if (parseInt(params.type) === 1) {
          this.params.type = params.type
          this.userTage += '代理'
        } else if (parseInt(params.type) === 2) {
          this.params.type = params.type
          this.userTage += '会员'
        } else {
          this.params.type = null // 全部
          this.userTage += `代理和会员`
        }
      },

      // 获取数据
      fetchData() {
        this.loading = true
        console.log('获取数据', this.params)
        this.$store
          .dispatch('ListAgent', {
            params: this.params,
            pagination: this.pagination,
          })
          .then(response => {
            console.log('123456789000', response)
            this.loading = false
            this.list = response.list
            if (response.list) {
              this.pagination.totalCount = parseInt(response.pagination.totalCount)
              this.pagination.defaultPageSize = parseInt(response.pagination.defaultPageSize)
            } else {
              this.pagination.totalCount = 0
              this.pagination.defaultPageSize = 0
            }
          })
      },

      // 当前页变化
      handleCurrentChange(value) {
        if (this.pagination.lastPage !== 0) {
          if (value < 1) {
            value = 1
          }
          if (value > this.pagination.lastPage) {
            value = this.pagination.lastPage
          }
          this.pagination.currentPage = value
          this.fetchData()
        }
      },

      // 每页显示数量变化
      handlePageSizeChange(value) {
        this.params.perpage = value
        this.fetchData()
      },
      handleOdds(index, row) {
        this.$router.push(`/user/odds/${row.type}/${row.upperLevelAgent.username}/edit/${row.username}/${row.level}`)
      },
      handleCreateAgent() {
        // 新增代理
        this.$router.push(`/user/set/1/${this.params.parent}/add`)
      },
      handleCreateMember() {
        // 新增会员
        this.$router.push(`/user/set/2/${this.params.parent}/add`)
      },
      handleEdit(index, row) {
        this.$router.push(
          `/user/set/${row.type}/${row.upperLevelAgent.username}/edit/${row.username}/${row.level}`
        )
        // 修改会员
      },
      handleCommission(index, row) {
        // 退水设置
        this.$router.push(`/user/commission/${row.type}/${row.upperLevelAgent.username}/edit/${row.username}/${row.level}`)
      },
      handleLog(index, row) {
        // 日志
        this.$router.push({
          name: 'profile_loginlog',
          params: {
            username: row.username,
          },
        })
      },
      handleRecord(index, row) {
        // 记录
        this.$router.push(`/user/record/${row.username}`)
      },
      handleFilter() {
        // 搜索
        this.fetchData()
      },

      // 下级数量列表
      fetchSubCount(agentname) {
        this.$store
          .dispatch('SubCount', {
            agentname: agentname,
          })
          .then(response => {
            console.log('下级数量列表', response)
            this.subCount = response
          })
      },
      formatHandicaps(row, column) {
        return row.handicaps.split(',').map(val => {
          return userMap.handicaps[val]
        })
      },
      // 清空amountFormd的数据
      resetAmountForm(lottery_type, row) {
        switch (lottery_type) {
          case 1:
            // 快开
            this.amountForm.selfAmount = parseInt(row.qk_lottery_amount) // 自身额度
            this.amountForm.parentAmount = parseInt(
              row.upperLevelAgent.qk_lottery_amount // 上级额度
            )
            break
          case 2:
            // 香港
            this.amountForm.selfAmount = parseInt(row.hk_lottery_amount) // 自身额度
            this.amountForm.parentAmount = parseInt(
              row.upperLevelAgent.hk_lottery_amount // 上级额度
            )
            break
          default:
            break
        }
        // 赋值给form
        this.amountForm.lottery_type = lottery_type
        this.amountForm.username = row.username
        this.handleAmountOperTypeChange()
      },
      // 处理额度操作类型的变化
      handleAmountOperTypeChange() {
        if (this.amountForm.oper_type === 1) {
          // 存入 增加自身额度
          this.amountForm.max = this.amountForm.parentAmount
        } else {
          // 提取 减少自身额度
          this.amountForm.max = this.amountForm.selfAmount
        }
        // 修改amount
        if (this.amountForm.amount > this.amountForm.max) {
          this.amountForm.amount = this.amountForm.max
        }
      },
      // 提交额度变更
      amountChangeSubmit() {
        // console.log(this.amountForm);
        // 验证额度
        if (this.amountForm.amount <= 0) {
          this.$message({
            message: '额度要大于0',
            type: 'error',
          })
          return false
        }
        console.log('提交额度变更', this.amountForm)
        // 发送请求
        this.$store
          .dispatch('ValidateChangeAmount', {
            ChangeAmountForm: this.amountForm,
          })
          .then(response => {
            if (response.length === 0) {
              // 验证通过
              this.$store
                .dispatch('ChangeAmount', {
                  ChangeAmountForm: this.amountForm,
                })
                .then(res => {
                  if (res === true) {
                    // 修改成功
                    this.$message({
                      message: `${this.amountForm.username}已${
                        this.amountForm.oper_type === 1 ? '存款' : '提款'
                        }${
                        this.amountForm.lottery_type === 1 ? '快开彩' : '香港彩'
                        }额度${this.amountForm.amount}元!`,
                      type: 'success',
                    })
                    // 重新拉取表格
                    this.fetchData()
                  } else {
                    // 修改失败
                    this.$message({
                      message: Object.values(res)[0].toString(),
                      type: 'error',
                    })
                  }
                })
            } else {
              // 服务端验证失败
              this.$message({
                message: Object.values(response)[0].toString(),
                type: 'error',
              })
            }
          })
      },
      // 处理全部提款
      handleWithdrawAll() {
        this.$store
          .dispatch('WithdrawAll', {
            username: this.amountForm.username,
            l_type: this.amountForm.lottery_type, // 1:快开,2:香港
          })
          .then(response => {
            if (response === true) {
              this.$message({
                message: `${this.amountForm.username}${
                  this.amountForm.lottery_type === 1 ? '快开彩' : '香港彩'
                  }额度已全部提取`,
                type: 'success',
              })
              // 重新拉取数据
              this.fetchData()
            } else {
              this.$message({
                message: `${this.amountForm.username}额度提取失败`,
                type: 'error',
              })
            }
          })
      },
      // 处理单元格的用户状态变化
      handleCellStatusChange(index, row) {
        this.$store
          .dispatch('ChangeStatus', {
            username: row.username,
            status: row.status,
          })
          .then(response => {
            if (response.status === true) {
              this.$message({
                message: `${row.username}状态修改成功`,
                type: 'success',
              })
            } else {
              this.$message({
                message: `${row.username}状态修改失败`,
                type: 'error',
              })
              // 修改失败重新拉取数据
              this.fetchData()
            }
          })
      },
      // 从服务器获取用户的父级占成明细
      handleParentShare(index, username) {
        this.dialogshow='block'
        this.parentShare = JSON.parse(JSON.stringify(null))
        this.$store
          .dispatch('ParentShare', {
            username: username,
          })
          .then(response => {
            const newData = []
            for (const key in response) {
              if (key !== 'message' && key !== 'data') {
                newData.push(response[key])
              }
            }
            this.parentShare = JSON.parse(JSON.stringify(newData)) // 反转顺序
          })
        $('#dialogShare').dialog({
          title: username + '#占成明细',
        })
        $('#dialogShare').dialog('open')

      },
      // 为每一行添加样式
      tableRowClassName({ row, rowIndex }) {
        if (row.status === 2) {
          return 'warning-row'
        } else if (row.status === 3) {
          return 'error-row'
        }
        return ''
      },
    },
    watch: {
      $route(to, from) {
        // 监控路由变化,从新加载数据
        if (to.params !== from.params) {
          this.checkParams(to.params)
          if (this.pagination.currentPage !== 1) {
            this.pagination.currentPage = 1 // 默认查询第一页,当前页变化,会触发数据拉取
          }
          this.fetchData()
        }
      },
    },
  }
</script>
<style scoped>
  .bread-nav{
    height:30px;
    font-size: 13px;
    line-height: 30px;
    background: #ECEFF2;
    border-bottom: 1px solid #d0dff2;
    padding: 0 0 0 10px;
    overflow: hidden;
  }
  .bread-nav-title{
    color:#386399;
    font-weight: bold;
    float: left;
    background: url("../../../../static/agent/img/tb.png") no-repeat left center;
    padding-left: 20px;
  }
  .bread-nav-content{
    padding-left: 20px;
    float: left;
  }
  .bread-nav-content select{
    height:20px;
    line-height: 20px;
    margin-top: 5px;
  }
  .bread-nav-content input[type="text"]{
    width:100px;
  }
  .bread-nav-content-right{
    float: right;
  }
  .bread-nav-content-right .back{
    border:0;
    background:url(/static/agent/img/ico_back.png) no-repeat left 8px;
    color:#386399;
    display: block;
    font-weight: bold;
    margin-right: 10px;
    padding: 0 0 0 20px;
  }
  .bread-nav-content-right .back:hover{
    text-decoration: underline;
  }
  .btnA{
    border:none;
    color: #e60012;
    font-weight: bold;
    padding: 5px 0 5px 20px;
    margin-left: 15px;
    background: url(/static/agent/img/ico_back.png) no-repeat left -24px;
  }
  .btnA:hover{
    text-decoration: underline;
  }

  .level-menu-button{
    border:none;
    background-color: rgba(0,0,0,0);
    float: left;
    color:blue;
    padding: 5px 0 5px 5px;
  }
  .level-menu-button:hover{
    color:red;
    text-decoration: underline;
  }
  .level-menu-right{
    display: inline-block;
    float: right;
    padding: 5px 10px 5px 0;
  }

  .fontSize{
    font-size:13px !important;
  }

  .myTable{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 2px  0;
    text-align: center;
  }
  .myTable th{
    background: linear-gradient(to bottom, #fff 0%, #D9EFF8 100%);
    text-align: center;
    color: #344b50;
    font-weight: bold;
    height:27px;
    line-height: 14px;
    font-size:13px;
    border: 1px solid #B9C2CB;
    margin: 0;
  }
  .myTable td{
    text-align: center;
    color: #344b50;
    line-height: 14px;
    font-size:13px;
    padding: 1px;
    border: 1px solid #B9C2CB;
    box-sizing: border-box;
  }
  .deepColor{
    background-color: #F2F2F2;
  }
  .tableBtn{
    color:blue;
    background-color: rgba(0,0,0,0);
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0;
  }
  .tableBtn:hover{
    text-decoration: underline;
    color:red;
  }
  .myTableTr:hover{
    background-color: #deedfe;
  }
  .myTableArray{
    margin-top: 20px;
  }
  .agentBtn{
    background: url(/static/agent/img/ico_bu.png) no-repeat left top !important;
    padding: 2px 0 0 21px;
    margin: 0;
  }
  .memberBtn{
    background: url(/static/agent/img/ico_bu.png) no-repeat 0 -18px !important;
    padding: 2px 0 0 21px;
    margin: 0;
  }
  .updataBtn{
    background: url(/static/agent/img/edit.gif) no-repeat left center;
    padding-left: 14px;
  }
  .commBtn{
    background: url(/static/agent/img/edt.gif) no-repeat left center;
    padding-left: 14px;
  }
  .logBtn{
    background: url(/static/agent/img/22.gif) no-repeat left center;
    padding-left: 14px;
  }
  .reportBtn{
    background: url(/static/agent/img/44.gif) no-repeat left center;
    padding-left: 14px;
  }
  .isOnline{
    background: url(/static/agent/img/u1.gif) no-repeat;
    width: 20px;
    height: 20px;
    display: inline-block;
  }


  .noticeFooter {
    background-color: #EEEEEE;
    margin: 5px 0;
    font-size:13px;
    padding:5px 0;
  }

  .noticeFooter-left {
    float: left;
  }

  .noticeFooter-right {
    float: right;
  }

  .noticeFooter-right button {
    border: 0;
    background-color: rgba(0, 0, 0, 0);
    color: blue;
    cursor: pointer;
  }

  .noticeFooter-right button:hover {
    color: red;
    text-decoration: underline;
  }

  .noticeFooterSelected {
    color: #ccc !important;
  }

  .dialogshow{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(136, 136, 136, 0.3);
    z-index: 300;
    overflow-y: auto;
  }
  .myDialog{
    background-color: #FFF;
    margin: 0;
  }
  .myDialogDiv{
    background-color: #FFF;
    width:400px;
    height: auto;
  }
  .textLeft{
    text-align: left !important;
  }
  .textRight{
    text-align: right !important;
    width: 25% !important;
  }
  .myPopup{
    position: absolute;
    z-index:2100;
    background-color: #FFF;
  }
  .delBtn{
    border:0;
    background: url(/static/agent/img/del.gif) no-repeat;
    width: 16px;
    height: 16px;
    float: right;
    cursor: pointer;
    vertical-align: middle;
    margin: 4px 2px 0 0;
  }
</style>
<style>
  .user-table-container {
    width: 100%;
    display: inline-block;
  }
  .user-filter-container .filter-item {
    margin-right: 12px;
    margin-bottom: 15px;
  }

  .user-filter-container .search-label {
    font-size: 12px;
  }

  .tableHeader{
    box-shadow: inset 0px -14px 19px 2px #CAE8F6;
    height: 25px;
    text-align: center;
    color: #131950;
    font-weight: bold;
    line-height: 25px;
    font-size:14px;
    padding: 0 !important;
    margin: 0;
  }
  .tableCellClassName{
    height: 25px;
    text-align: center;
    color: #131950;
    line-height: 25px;
    font-size:14px;
    padding: 0;
    /*border: 1px solid #B9C2CB;*/
  }

  .level-menu {
    text-align: center;
    font-size: 12px;
  }

  .level-menu .el-menu {
    border: solid 1px #b9c2cb;
    border-top: none;
    border-radius: 3%;
  }
  .level-menu .el-menu-item {
    height: 30px;
    line-height: 30px;
    color: blue;
  }
  .table-user-list {
  }
  .table-user-list .el-table .warning-row {
    background: oldlace;
  }

  .table-user-list .el-table .error-row {
    background: rgb(241, 216, 220);
  }
  .opera-link {
    margin: 0 5px;
  }


  .content{
    padding: 10px;
    min-width:1350px;
  }

  .bread-nav-content .el-input__inner{
    height:25px;
    line-height: 25px;
  }
  .bread-nav-content .el-button{
    padding: 4px 10px;
  }
  .level-menu .el-tag{
    box-shadow: inset 0px -10px 10px 2px #CAE8F6;
    border-radius: 0;
    border: 1px solid #b9c2cb;
    background-color: rgba(0,0,0,0);
    height: 24px;
    line-height: 24px;
    font-weight: bold;
    font-size: 13px;
    color:#344B54
  }
</style>
